<template>
    <scroll-view
        :scroll-y="true"
        :style="{
            height: 'calc(100vh)',
        }"
        class="page"
        @touchmove.stop
    >
        <view class="navbar">
          <!-- #ifdef MP-WEIXIN -->
          <navbar title="订单完成" bgColor="#000" fontColor="#fff" left="home"> </navbar>
          <!-- #endif -->
          <!-- #ifdef MP-ALIPAY -->
          <navbar title="订单完成" bgColor="#000" fontColor="#fff" hideBackLabelText> </navbar>
          <!-- #endif -->
        </view>
        <view class="payment-box">
            <view class="title">
              <!--                    name="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/pay_ok.png"-->
                <u-icon name="clock-fill" size="80"  imgMode="scaleToFill" v-if="payStatus==0"></u-icon>
              <u-icon name="checkmark-circle-fill" color="#00a960" size="80" imgMode="scaleToFill" v-if="payStatus==1"></u-icon>
              <u-icon name="close-circle-fill" color="red" size="80" imgMode="scaleToFill" v-if="payStatus==-1"></u-icon>
                <view style="margin-left: 8rpx" v-if="payStatus==0">支付中</view>
              <view style="margin-left: 8rpx" v-if="payStatus==1">支付成功</view>
              <view style="margin-left: 8rpx" v-if="payStatus==-1">支付失败</view>
            </view>
            <view class="table" v-if="payStatus == 1">
                <view class="name">{{headerTableNo}}</view>
                <view class="no">{{ tableNo_mealNumber }}</view>
            </view>
          <view class="table" v-if="payStatus==-1">
            <view class="name">{{errorMessage}}</view>
          </view>
            <view class="back" @click="goHome">返回首页</view>
        </view>
        <view class="ordering-box" v-if="payStatus==1">
            <view class="shop-box">
              <view class="branch">
                <view class="iconfont vivipos-icon-shangdian branch-icon"></view>
                <view class="branch-name">{{ order_info.branch_name?order_info.branch_name: '未设置门店' }}</view>
              </view>
              <view class="cust-sum">{{ (!order_info.cust_sum || order_info.cust_sum == 0) ? 1 :  order_info.cust_sum}}人</view>
            </view>
<!--          <view class="detail" style="margin-top: 0">-->
<!--            <view class="row">-->
<!--              <view class="u-col-6">您的桌台/取餐号</view>-->
<!--              <view class="u-col-6 text-right table_no">{{ tableNo_mealNumber }}</view>-->
<!--            </view>-->
<!--            <view class="border-line border-line&#45;&#45;gray"></view>-->
<!--            <view class="row">-->
<!--              <view class="u-col-3">交易时间</view>-->
<!--              <view class="u-col-9 text-right">{{ payment[0].payment_time }}</view>-->
<!--            </view>-->
<!--          </view>-->
            <view class="good-list">
                <block v-for="(good, key) in cart_info" :key="key">
                    <block v-if="key < 3 || showMore">
                        <view class="border-line border-line--gray"></view>
                        <view class="good-row">
                            <view class="u-col-6">
                                <view :class="good.product_kind == 3 ? 'good-name combos-dtl-name' : 'good-name'">{{good.product_kind==3 ? '-' : ''}}{{ good.product_name }}</view>
                                <view class="good-spce">{{good.product_kind==3 ? ' ' : ''}}{{ good.food_property }}</view>
                            </view>
                            <view class="u-col-2">
                                <view class="good-number">x{{ good.qty }}</view>
                            </view>
                            <view class="u-col-4">
                                <view class="good-price price">
                                  <view style="width:100%;text-align:right;margin-right:10rpx;">
                                    <block v-if="!(good.product_set_calc == 1 && good.product_kind == 3)">
                                      <text class="icon" v-if="good.tag == 4">会员价</text>
                                      <text class="icon" v-if="good.tag == 1">特价</text>
                                      ￥{{ good.total}}
                                    </block>
                                  </view>
                                </view>
                                <view class="gray" v-if="good.tag!=0">
                                  ￥{{ good.current_price }}
                                </view>
                            </view>
                        </view>
                    </block>
                </block>
            </view>
            <view class="price-box" v-if="showMore">
                <view class="border-line border-line--gray" v-if="order_info.box_price > 0"></view>
                <view class="lunch-box-fee" v-if="order_info.box_price > 0">
                    <view class="u-col-6">
                        <view class="left">餐盒费</view>
                    </view>
                    <view class="u-col-6">
                        <view class="right price">￥{{ order_info.box_price }}</view>
                    </view>
                </view>
<!--                <view class="border-line border-line&#45;&#45;gray"></view>-->
<!--                <view class="good-row coupon-row">-->
<!--                    <view class="u-col-6">-->
<!--                        <view v-if="fullPriceType == 1" class="good-name" style="color: #f9ae3d">-->
<!--                            满200减20-->
<!--                        </view>-->
<!--                        <block v-if="fullPriceType == 2">-->
<!--                            <view class="good-name" style="color: #f9ae3d"> 醋溜花生米 </view>-->
<!--                            <view class="good-spce">份</view>-->
<!--                        </block>-->
<!--                    </view>-->
<!--                    <view class="u-col-2">-->
<!--                        <view class="good-number">-->
<!--                            <block v-if="fullPriceType == 2">x1</block>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                    <view class="u-col-4">-->
<!--                        <view class="good-price price">-->
<!--                            <view class="icon">-->
<!--                                <text v-if="fullPriceType == 1">满额减价</text>-->
<!--                                <text v-if="fullPriceType == 2">满额赠菜</text>-->
<!--                            </view>-->
<!--                            <view v-if="fullPriceType == 1"> -￥20 </view>-->
<!--                            <view v-if="fullPriceType == 2"> ￥0 </view>-->
<!--                        </view>-->
<!--                        <view class="gray" v-if="fullPriceType == 2"> ￥10 </view>-->
<!--                    </view>-->
<!--                </view>-->
<!--                <view class="good-row coupon-row" v-if="currentCoupon != null">-->
<!--                    <view class="u-col-6">-->
<!--                        <view class="good-coupon" style="color: #f9ae3d; font-size: 34rpx">-->
<!--                            <image-->
<!--                                style="height: 50rpx; width: 70rpx"-->
<!--                                src="https://vivipos.oss-cn-shanghai.aliyuncs.com/miniprogram/coupon_bg.png"-->
<!--                                mode="scaleToFill"-->
<!--                            />-->
<!--                            <view class="icon-text">{{ currentCoupon.icon_text }}</view>-->
<!--                            <view class="title">{{ currentCoupon.title }}</view>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                    <view class="u-col-2">-->
<!--                        <view class="good-number"> </view>-->
<!--                    </view>-->
<!--                    <view class="u-col-4">-->
<!--                        <view class="good-price price" style="color: red">-->
<!--                            <view> -￥4 </view>-->
<!--                        </view>-->
<!--                    </view>-->
<!--                </view>-->
                <view class="border-line border-line--black"></view>
                <view class="total-price">
                    <view class="left u-col-4"> ￥{{ order_info.total?order_info.total:0 | numFilter }} </view>
                    <view class="center u-col-4"> 优惠：￥{{ order_info.discount_money?order_info.discount_money:0 | numFilter }} </view>
                    <view class="right u-col-4"> 应付：￥{{ order_info.payment_amt?order_info.payment_amt:0 |  numFilter}}  </view>
                </view>
            </view>
        </view>
        <view class="detail" v-if="showMore">
            <view class="row">
                <view class="u-col-6">{{hasTableNo? "桌台/取餐号" : "取餐号"}}</view>
                <view class="u-col-6 text-right table_no">{{ tableNo_mealNumber }}</view>
            </view>
            <view class="border-line border-line--gray"></view>
            <view class="row">
                <view class="u-col-3">交易时间</view>
                <view class="u-col-9 text-right">{{ payment[0].payment_time }}</view>
            </view>
            <view class="border-line border-line--gray"></view>
            <view class="row">
                <view class="u-col-6">支付方式</view>
                <view class="u-col-3 text-right">{{ payment[0].payment_name }}</view>
                <view class="u-col-3 text-right price">￥{{ payment[0].pay_money | numFilter }}</view>
            </view>
            <view class="border-line border-line--gray"></view>
            <view class="row">
                <view class="u-col-3">订单号</view>
                <view class="u-col-9 text-right" style="overflow: hidden;font-size: 28rpx">{{order_info.order_no}}</view>
            </view>
            <view class="border-line border-line--gray"></view>
            <view class="row">
                <view class="u-col-3">备注</view>
                <view class="u-col-9 text-right">
                    {{ order_info.cust_note }}
                </view>
            </view>
            <view class="border-line border-line--gray"></view>
<!--            <view class="row">-->
<!--                <view class="u-col-3">优惠说明</view>-->
<!--                <view class="u-col-9 text-right text-red">-->
<!--                    <view class="text-right">免费咖啡券x1</view>-->
<!--                    <view class="text-right">5源代金券x1</view>-->
<!--                </view>-->
<!--            </view>-->
        </view>
        <block v-if="!showMore">
            <view class="more-good" @click="moreDetail(true)">
                查看订单详情 <u-icon name="arrow-down" size="40"></u-icon>
            </view>
        </block>
        <block v-else>
            <view class="more-good" @click="moreDetail(false)">
                收起订单详情 <u-icon name="arrow-up" size="40"></u-icon>
            </view>
        </block>
        <view style="height: 100rpx"></view>
    </scroll-view>
</template>
<script>
import { mapState } from "vuex"; //引入mapState
import PageApi from "@/api/page"
export default {
    data() {
        return {
            lunch_box_fee: 9, // 餐盒费
            fullPriceType: 2, // 满额类型
            showMore: false, // 展开更多,
            payStatus: 0, // 0等待  1 成功 -1 失败
          errorMessage: '',
          cart_info: [],
          coupons: [],
          discount: [],
          is_cust_sum: false,
          order_info: {},
          payment: {}
        };
    },
    computed: {
        ...mapState({
          //   cartGoods: (state) => state.ordering.cartGoods,
          //   totalPrice: (state) => state.ordering.totalPrice,
          //   table_no: (state) => state.ordering.table_no,
          //   has_table_no: (state) => state.ordering.has_table_no,
          //   peopleNumber: (state) => state.ordering.peopleNumber,
          //   remark: (state) => state.ordering.remark,
          //   currentCoupon: (state) => state.ordering.currentCoupon,
          // order_info: (state) => state.cart.order_info,
          client_sn: (state) => state.cart.client_sn,
          order_id: (state) => state.cart.order_id,
          CartOrderInfo: (state) => state.cart.order_info // 购物车orderInfo
        }),
      tableNo_mealNumber() {
          let d = ''
        if(this.order_info.table_no && this.order_info.table_no.length>0){
          d+=this.order_info.table_no
        }
        if(d.length<=0){
          d= this.order_info.meal_number
        }else {
          if(this.order_info.meal_number && this.order_info.meal_number.length>0){
            d+=('/'+this.order_info.meal_number)
          }
        }

        return d
      },
      // 是否有桌号
      hasTableNo () {
        return this.order_info.table_no && this.order_info.table_no.length>0
      },
      headerTableNo () {
          if(this.hasTableNo) return "您的桌台/取餐号"
          return "您的取餐号"
      },
        goodList: function () {
            let goodList = [];
            for (let key in this.cartGoods) {
                if (this.cartGoods[key].spceGoods != undefined) {
                    for (let skey in this.cartGoods[key].spceGoods) {
                        goodList.push(this.cartGoods[key].spceGoods[skey]);
                    }
                } else {
                    goodList.push(this.cartGoods[key]);
                }
            }
            return goodList;
        }
        // payment: function () {
        //     let payment = "";
        //     switch (this.$store.state.ordering.payment) {
        //         case "weixin":
        //             payment = "微信支付";
        //             break;
        //         case "zhifubao":
        //             payment = "支付宝";
        //             break;
        //     }
        //     return payment;
        // },
    },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
    methods: {
        moreDetail(bool) {
            this.showMore = bool;
        },
        goHome() {
            uni.redirectTo({ url: "/pages/home/index" });
        },
      paymentQuery() {
        PageApi.paymentQuery({
          client_sn: this.client_sn
          // client_sn: 'FOCN010001320221202134245040456'
        }).then(res=>{
          console.log(res)
          if(res.code == 200){
            this.payStatus = res.data.status
            // 成功
            if(res.data.status == 1){
              if(this.interval){
                clearInterval(this.interval)
              }
              this.orderInfo()
              return
            }
            // 等待
            if(res.data.status == 0){
              this.errorMessage = res.message
            }
            // 失败
            if(res.data.status == -1){
              this.errorMessage = res.message
              if(this.interval){
                clearInterval(this.interval)
              }
              this.orderInfo()
              return
            }
          }
          this.payStatus = 0

        })
      },
      // 当前订单详情
      orderInfo() {
          PageApi.orderInfo({
            order_id: this.CartOrderInfo.order_id
            // order_id: "979297819-3280-a648-b486-f0883d8cf6b"
          }).then(res=>{
            if(res.code == 200){
			  this.payStatus = 1
              this.cart_info = res.data.cart_info
              this.coupons = res.data.coupons
              this.discount = res.data.discount
              this.is_cust_sum = res.data.is_cust_sum
              this.order_info = res.data.order_info
              this.payment = res.data.payment
            }
          })
      }
    },
    destroyed() {
        this.$store.commit("ordering/reset");
    },
  onShow(options) {
    // 查询当前订单的支付状态信息
    const self = this
    this.interval = setInterval(e=>{
      self.paymentQuery()
    },1500)

	// this.orderInfo()

    // wx.enableAlertBeforeUnload({
    //   message: "返回首页",
    //   complete () {
    //     console.log(777777)
    //     uni.reLaunch({ url: "/pages/home/index",
    //       success(e){
    //         // uni.$emit('reloadPageData',{})
    //       }
    //     });
    //   }
    // })
  }
};
</script>
<style lang="scss">
.text-right {
    text-align: right;
}

.detail {
    margin-top: 20rpx;
    background-color: #fff;
    .row {
        display: flex;
        justify-content: space-between;
        padding: 40rpx 30rpx;
    }
}

.table_no {
    font-size: 38rpx;
    font-weight: 500;
}

.price {
    font-weight: 500;
}

.payment-box {
    background-color: #fff;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .title {
        font-size: 40rpx;
        padding: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .table {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 480rpx;
        height: 120rpx;
        margin: 0 20rpx 20rpx;
        padding: 20rpx;
        background-color: #f2f2f2;
        border-radius: 30rpx;
        .name {
            color: #9c9c9c;
            font-size: 34rpx;
        }
        .no {
            margin-top: 10rpx;
            color: red;
            font-size: 42rpx;
            font-weight: 700;
        }
    }
    .back {
        font-size: 38rpx;
        font-weight: 500;
        color: #f9ae3d;
        margin-top: 8rpx;
    }
}
.good-coupon {
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    .icon-text {
        width: 100rpx;
        margin-left: -70rpx;
        text-align: center;
        color: #f9ae3d;
        font-weight: 600;
        font-size: 24rpx;
        -webkit-transform-origin-x: 0; /*缩小后文字居左*/
        -webkit-transform: scale(0.7); /*关键*/
        transform: scale(0.7);
    }
    .title {
        font-size: 30rpx;
        margin-left: -20rpx;
    }
}

.shop-box {
  padding: 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 34rpx;
  margin-top: 5rpx;
  color: #666666;
  background-color: white;
  //height: 50rpx;
  //line-height: 30rpx;
  .branch{
    display: flex;
    .branch-icon{
      font-size: 38rpx;
      padding-top: 2rpx;
    }
    .branch-name{
      padding-left: 10rpx;
    }
  }
}

.ordering-box {
    margin: 20rpx 0 !important;
    background-color: #fff;
}

.page {
    background-color: #f2f2f2;
}

.more-good {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 50rpx;
    font-size: 30rpx;
    color: #666;
    background-color: #fff;
    padding: 30rpx;
}

.coupon-row {
    height: 80rpx !important;
}

.table-no {
    width: 100%;
    height: 140rpx;
    background-color: #f2f2f2;
    font-size: 34rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .no {
        color: red;
        font-size: 46rpx;
    }
}

.text-red {
    color: red;
}

.good-row {
    height: 100rpx;
    margin: 20rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    .good-name {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-size: 34rpx;
        margin-left: 10rpx;
    }
  .combos-dtl-name{
    font-size: 28rpx;
    color: #959595;
    margin-left: 20rpx;
  }

    .good-spce {
        color: #ccc;
        font-size: 26rpx;
        width: 100%;
        height: auto;
        margin-left: 10rpx;
    }

    .good-number {
        text-align: center;
    }

    .good-price {
      text-align: right;
      margin-right: 0rpx;
      display: flex;
      justify-content: end;
      align-items: center;
      font-size: 30rpx;
      .icon {
            font-size: 24rpx;
            margin-right: 8rpx;
            color: #f9ae3d;
        }
    }
    .gray {
        text-align: right;
        margin-right: 30rpx;
        color: #ccc;
        text-decoration: line-through;
        font-size: 26rpx;
    }
}

.price-box {
    .lunch-box-fee {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 20rpx 0;
        height: 100rpx;
        .left {
            margin-left: 30rpx;
        }
        .right {
            text-align: right;
            margin-right: 30rpx;
        }
    }

    .total-price {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30rpx;
        padding: 40rpx 20rpx;
        .left {
            text-align: left !important;
        }
        .center {
            text-align: center !important;
            color: orange;
        }
        .right {
            text-align: right !important;
        }
    }
}

.align-items-start {
    align-items: flex-start;
}

.align-items-end {
    align-items: flex-end;
}

.align-items-center {
    align-items: center;
}

.border-line {
    margin: 0 30rpx;
    height: 1px;
    background-size: 12px 1px;
    background-repeat: repeat-x;
    &--gray {
        background-image: linear-gradient(to right, #ccc 0%, #ccc 70%, transparent 0%);
    }
    &--black {
        background-image: linear-gradient(to right, #000 0%, #000 70%, transparent 0%);
    }
}
</style>
